<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('faq.cjwt')" :leftIcon="true" :rightIcon="'kefu'" @clickRight="clickRight"></navbar>
		
		<!-- 问候语和描述 -->
		<view class="greeting-section">
			<text class="greeting-title">{{ t('faq.hwmnwnzxsm') }}</text>
			<text class="greeting-desc">{{ t('faq.ssda') }}</text>
		</view>
		
		<!-- 搜索框 -->
		<view class="search-content">
			<view class="search-box">
				<image class="search-icon" src="/static/icon/search-icon2.svg" mode="aspectFit" ></image>
				<input type="text" v-model="searVal" @input="handleSearchInput" class="search-input" :placeholder="t('faq.ss')" />
			</view>
			<view class="input-mask" v-show="searVal" @click="searVal = ''"></view>
			<view class="popup-box" v-show="searVal && searchResults.length > 0">
				<view class="items" v-for="article in searchResults" :key="article.id" @click="toDetails(article)">
					<text>{{ article.title || article.name || t('faq.wkysyjysjxczm') }}</text>
					<image class="arrow-icon" src="/static/icon/xiala.svg" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 搜索无结果提示 -->
			<view class="popup-box" v-show="searVal && searchResults.length === 0">
				<view class="items">
					<text style="color: #999;">暂无搜索结果</text>
				</view>
			</view>
		</view>
		
		<!-- 注册有礼区域 -->
		<scroll-view :scroll-x="true">
			<view class="feature-cards" v-if="!registerLoading">
				<view class="feature-card" v-for="article in registerArticleList" :key="article.id" @click="toDetails(article)">
					<view class="register-content">
						<text class="register-title">{{ article.title || article.name || t('faq.zcyl') }}</text>
						<!-- 动态渲染图片，优先使用cover字段，如果没有则使用默认图片 -->
						<view class="image-container">
							<!-- 图片加载状态 -->
							<view class="image-loading" v-if="imageLoadingStates[article.id]">
								<text style="color: #999; font-size: 20rpx;">加载中...</text>
							</view>
							<!-- 实际图片 -->
							<image 
								class="register-image" 
								:src="article.cover || '/static/icon/bg1.svg'" 
								mode="aspectFit"
								@load="onImageLoad(article.id)"
								@error="onImageError(article.id)"
								:style="{ display: imageLoadingStates[article.id] ? 'none' : 'block' }"
								lazy-load
							></image>
							<!-- 图片加载失败时显示默认图片 -->
							<image 
								v-if="imageErrorStates[article.id]"
								class="register-image fallback-image" 
								src="/static/icon/bg1.svg" 
								mode="aspectFit"
							></image>
						</view>
					</view>
				</view>
				<!-- 如果没有文章，显示默认的注册有礼卡片 -->
				<view class="feature-card" v-if="registerArticleList.length === 0">
					<view class="register-content">
						<text class="register-title">{{ t('faq.zcyl') }}</text>
						<image class="register-image" src="/static/icon/bg1.svg" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<!-- 加载状态 -->
			<view class="feature-cards" v-if="registerLoading">
				<view class="feature-card">
					<view class="register-content">
						<text class="register-title" style="color: #999;">加载中...</text>
						<image class="register-image" src="/static/icon/bg1.svg" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- TIES注册说明 -->
		<view class="register-info">
			<text class="register-info-title">{{ t('faq.tieszc') }}</text>
			<text class="register-info-desc">{{ t('faq.wmzly') }}</text>
		</view>
		
		<!-- 常见问题列表 -->
		<view class="faq-section">
			<text class="faq-section-title">{{ t('faq.cjwt') }}</text>
			<view class="faq-list" v-if="!loading">
				<view class="faq-item" v-for="article in articleList" :key="article.id" @click="toDetails(article)">
					<text class="faq-question">{{ article.title || article.name || t('faq.wkysy') }}</text>
					<image class="arrow-icon" src="/static/icon/xiala.svg" mode="aspectFit"></image>
				</view>
				<!-- 空状态 -->
				<view v-if="articleList.length === 0" class="empty-state">
					<text style="color: #999; text-align: center; padding: 40rpx;">暂无文章</text>
				</view>
			</view>
			<!-- 加载状态 -->
			<view v-if="loading" class="loading-state">
				<text style="color: #999; text-align: center; padding: 40rpx;">加载中...</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useI18n } from 'vue-i18n';
	import {ref, onMounted} from "vue"
	import { faqApi } from '@/utils/api.js'
	const { t, locale } = useI18n();
	const searVal = ref(null)
	
	// 响应式数据
	const articleList = ref([]) // 常见问题文章列表（分类ID为7）
	const registerArticleList = ref([]) // 注册有礼文章列表（分类ID为12）
	const searchResults = ref([]) // 搜索结果
	const loading = ref(false) // 加载状态
	const registerLoading = ref(false) // 注册有礼加载状态
	
	// 图片加载状态管理
	const imageLoadingStates = ref({}) // 图片加载状态
	const imageErrorStates = ref({}) // 图片错误状态
	
	// 获取常见问题文章列表（分类ID为7）
	const getArticleList = async () => {
		try {
			loading.value = true;
			const result = await faqApi.getArticleList({
				page: 1,
				pageSize: 20,
				categoryId: 7 // 常见问题分类ID
			});
			
			if (result.code === 200 || result.code === 0) {
				articleList.value = result.data?.list || result.data || [];
			} else {
				console.error('获取常见问题列表失败:', result.msg);
				uni.showToast({
					title: result.msg || '获取常见问题列表失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('获取常见问题列表失败:', error);
			uni.showToast({
				title: '获取常见问题列表失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};
	
	// 获取注册有礼文章列表（分类ID为12）
	const getRegisterArticleList = async () => {
		try {
			registerLoading.value = true;
			const result = await faqApi.getArticleList({
				page: 1,
				pageSize: 10,
				categoryId: 12 // 注册有礼分类ID
			});
			
			if (result.code === 200 || result.code === 0) {
				registerArticleList.value = result.data?.list || result.data || [];
				// 初始化图片加载状态
				registerArticleList.value.forEach(article => {
					if (article.cover) {
						imageLoadingStates.value[article.id] = true;
						imageErrorStates.value[article.id] = false;
					}
				});
			} else {
				console.error('获取注册有礼列表失败:', result.msg);
				uni.showToast({
					title: result.msg || '获取注册有礼列表失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('获取注册有礼列表失败:', error);
			uni.showToast({
				title: '获取注册有礼列表失败',
				icon: 'none'
			});
		} finally {
			registerLoading.value = false;
		}
	};
	
	// 图片加载成功处理
	const onImageLoad = (articleId) => {
		imageLoadingStates.value[articleId] = false;
		imageErrorStates.value[articleId] = false;
	};
	
	// 图片加载失败处理
	const onImageError = (articleId) => {
		imageLoadingStates.value[articleId] = false;
		imageErrorStates.value[articleId] = true;
	};
	
	// 搜索文章
	const searchArticles = async (keyword) => {
		if (!keyword || keyword.trim() === '') {
			searchResults.value = [];
			return;
		}
		
		try {
			const result = await faqApi.getArticleList({
				title: keyword.trim(), // 使用title参数搜索文章标题
				pageNo: 1, // 页面参数
				pageSize: 10, // 数据条数
				categoryId: 7 // 分类ID为7
			});
			
			if (result.code === 200 || result.code === 0) {
				searchResults.value = result.data?.list || result.data || [];
			} else {
				console.error('搜索文章失败:', result.msg);
				searchResults.value = [];
			}
		} catch (error) {
			console.error('搜索文章失败:', error);
			searchResults.value = [];
		}
	};
	
	// 监听搜索输入
	const handleSearchInput = () => {
		if (searVal.value) {
			searchArticles(searVal.value);
		} else {
			searchResults.value = [];
		}
	};
	
	// 页面加载时获取文章列表
	onMounted(() => {
		getArticleList(); // 获取常见问题列表
		getRegisterArticleList(); // 获取注册有礼列表
	});
	
	// navbar右侧图标点击事件
	const clickRight =()=>{
		uni.navigateTo({
			url:"/pages/service/service"
		})
	}
	// 跳转到详情
	const toDetails = (article) => {
		if (article && article.id) {
			uni.navigateTo({
				url: `/pages/home/faqDetais?id=${article.id}`
			});
		} else {
			uni.navigateTo({
				url: "/pages/home/faqDetais"
			});
		}
	}
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding: 20rpx 41.81rpx 100rpx;
		box-sizing: border-box;
	}
	
	.greeting-section {
		margin-top: 41.86rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.greeting-title {
		font-size: 41.86rpx;
		color: #333;
		font-weight: 400;
		margin-bottom: 52.32rpx;
		text-align: center;
	}
	
	.greeting-desc {
		font-size: 27.91rpx;
		color: #919191;
		font-weight: 400;
		text-align: center;
		line-height: 1.5;
	}
	
	.search-content{
		position: relative;
		.input-mask{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 99999;
			background: rgba(51, 51, 51, 0.3);
			backdrop-filter: blur(6rpx);
		}
		
		.popup-box{
			position: absolute;
			top: 114.78rpx;
			width: 618.91rpx;
			left: 24.87rpx;
			height: 187px;
			z-index: 999999;
			padding:10rpx 62.71rpx;
			box-sizing: border-box;
			border-radius: 16px;
			background: rgba(255, 255, 255, .8);
			.items{
				height: 91.71rpx;
				border-bottom: 2.68rpx solid rgba(74, 73, 73, .1);
				display: flex;
				align-items: center;
				justify-content: space-between;
				color:rgba(51, 51, 51, 1);
				font-size: 28.07rpx;
				font-weight: 500;
			}
		}
	}
	.search-box {
		margin: 46.32rpx auto 0;
		width: 627.91rpx;
		height: 97.67rpx;
		padding: 13.95rpx 80.34rpx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 999999;
		box-sizing: border-box;
		border-radius: 16px;
		border: 1px solid transparent;
		background: linear-gradient(#F9FAFB, #F9FAFB) padding-box,
					linear-gradient(90deg, #0CB394 0%, #058FC8 100%) border-box;
		
	}
	
	.search-icon {
		width: 34.88rpx;
		height: 34.88rpx;
	}
	
	.search-input {
		flex: 1;
		height: 41.86rpx;
		font-size: 27.91rpx;
		color: #333;
		position: absolute;
		left: 128.76rpx;
	}
	
	.feature-cards {
		margin-top: 41.86rpx;
		display: flex;
		justify-content: space-between;
		gap: 57.69rpx;
	}
	
	.feature-card {
		flex: 1;
		border-radius: 13.95rpx;
		min-width: 350.88rpx;
		height: 185.96rpx;
		border-radius: 21.05rpx;
		background: rgba(48, 129, 236, 0.5);
		border: 1.75rpx solid #027CD9;
	}
	
	.register-card {
		background: linear-gradient(90deg, #0CB394 0%, #058FC8 100%);
		position: relative;
		overflow: hidden;
		border-radius: 13.95rpx;
	}
	
	.register-content {
		position: relative;
		display: flex;
		align-items: center;
		height: 100%;
		justify-content: flex-start;
	}
	
	.register-title {
		color: #FFFFFF;
		width: 50%;
		font-size: 27.91rpx;
		font-weight: 500;
		z-index: 1;
		text-align: center;
		margin-left: 20.93rpx;
	}
	
	.image-container {
		position: absolute;
		right: -38.03rpx;
		top: -20.64rpx;
		width: 228.07rpx;
		height: 210.53rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden; /* 防止图片溢出容器 */
		border-radius: 8rpx; /* 添加圆角美化 */
		
		.image-loading {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
			font-size: 20rpx;
			color: #999;
		}
		
		.register-image {
			width: 100%;
			height: 100%;
			max-width: 228.07rpx;
			max-height: 210.53rpx;
			object-fit: cover; /* 改为cover确保填满容器且不变形 */
			object-position: center; /* 居中显示 */
			margin-right: 48rpx;
			border-radius: 64rpx;
			
			&.fallback-image {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				object-fit: contain; /* 默认图片使用contain模式 */
			}
		}
	}
	
	.register-info {
		margin-top: 41.86rpx;
		padding: 27.91rpx 0;
		border-radius: 13.95rpx;
	}
	
	.register-info-title {
		font-size: 27.91rpx;
		color: #000;
		margin-bottom: 13.95rpx;
		display: block;
		text-align: center;
	}
	
	.register-info-desc {
		font-size: 27.91rpx;
		color: #333;
		font-weight: 300;
		line-height: 1.5;
	}
	
	.faq-section {
		margin-top: 41.86rpx;
	}
	
	.faq-section-title {
		font-size: 35.09rpx;
		font-weight: 500;
		color: #000;
		margin-bottom: 20.93rpx;
		display: block;
	}
	
	.faq-list {
		border-radius: 13.95rpx;
		overflow: hidden;
	}
	
	.faq-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 27.91rpx;
		border-bottom: 1.74rpx solid #e4e4e8;
	}
	
	.faq-item:last-child {
		border-bottom: none;
	}
	
	.faq-question {
		font-size: 27.91rpx;
		color: #333;
		font-weight: 500;
	}
	
	.arrow-icon {
		width: 27.91rpx;
		height: 27.91rpx;
	}
</style>